| 根据背景图片计算文字颜色（实用、赞） | 您所在的位置：网站首页 › 背景图 字体 › 根据背景图片计算文字颜色（实用、赞） |
|
原文出处: https://www.it1352.com/533401.html 延伸阅读： 1、根据背景颜色确定字体颜色 2、根据背景颜色的深浅确定字的颜色 3、Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。 （Good有代码，计算图片平均色） 4、JavaScript调色器以及取互补色的算法思路 5、有关Color的问题，如何能得到与已知颜色反差最大的颜色 （核心是下面一段话） 要计算某种颜色的互补色 首先取得这个颜色的RGB数值 再用255分别减去你现有的RGB值即可 比如纯黄色：r255 g255 b0 那么通过计算 r(255-255) g(255-255) b(255-0) 互补色为：r0 g0 b255 就是纯蓝色 6、 WEB-互补色与对比色的计算与获取。（这个很棒 Good!) 7、JS十六进制颜色（#fff）与RGB, HSL颜色的相互转换 （代码） 8、请问各位怎么利用js实现文字与背景反色？(16进制）（代码） 9、RGB和RGBA之间的转换 （代码） 10、js 生成颜色相近的两组颜色 (方案） 你得定义一下你设想中的颜色相近具体是如何相近？ #FFFFFF这样的颜色值是有规律可循的，但更好的方式是对比色相、饱和度和亮度。比如说色相相等（或者相差在很小的范围之内，好比5-10）饱和度与亮度相差正负5 这样的颜色算是相近，那只需要在 0-255 这个范围内按照上述规则随机取值就好了。生成的值是 HSL 可以直接返回给 CSS 用，也可以转换为16进制拼出 #xxxxxx 这样的值 11、判断一个颜色值是否接近白色或黑色? 把颜色rgb的3个值分别减255，得出3个差值，如果3个差值都在正负5以内，表示和白色很相近。黑色就减0呗。 当然这个正负5只是一个阀值，你也可以定们10或其它值。 其实利用rgb同时加减一个阀值也可以找出相近颜色 12、JS 生成随机色，避免相近色 (代码，排除过灰和过亮）（改一下阀值就可以成为找相近色） 问题： 页面图片切换后，根据图片主要颜色决定图片上文字的颜色是#000（黑）或#fff（白）。（互补色） 解决办法： 你可以这样做。(使用 Colours.js 和下面的函数) 注意： 这只适用于同一网域的图片和支持HTML5 canvas的浏览器中。 Javascript function getAverageRGB(imgEl) { var blockSize = 5, // only visit every 5 pixels defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = { r: 0, g: 0, b: 0 }, count = 0; if (!context) { return defaultRGB; } height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try { data = context.getImageData(0, 0, width, height); } catch (e) { /* security error, img on diff domain */ alert('x'); return defaultRGB; } length = data.data.length; while ((i += blockSize * 4) < length) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i + 1]; rgb.b += data.data[i + 2]; } // ~~ used to floor values rgb.r = ~~ (rgb.r / count); rgb.g = ~~ (rgb.g / count); rgb.b = ~~ (rgb.b / count); return rgb; } var rgb = getAverageRGB(document.getElementById('i')), compliment = +("0x" + Colors.rgb2hex.apply(null, Colors.complement(rgb.r, rgb.b, rgb.g ).a).slice(1)); document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.b + ',' + rgb.g + ')'; document.getElementById('text').style.color = (compliment > 8388607 ? "#000" : "#fff");
|
| CopyRight 2018-2019 实验室设备网 版权所有 |